<template>
  <div class="head-search">
    <div :class="is_search_button ? 'head-flex-dz': ''">
    <div class="head-search-item" @click="handleClickOpenDialog">
      <!-- TODO 小程序端需要使用disabled-->
      <input class="readonlyInput" :class="is_search_button ? 'dz-searchInput': ''" type="text" v-model="keywords" readonly :placeholder="is_search_button ? '请输入姓名/产品名关键词搜索': '请输入商品/店铺名称'">
      <div class="icon miniprogram">
        <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        <!-- TODO 暂时隐藏svg -->
        <!-- <svg-icon else icon-class="icon_search" /> -->
      </div>
    </div>
    <div class="head-search-cancel"  @click="handleClickOpenDialog" v-if="is_search_button">搜索</div>
    </div>
    <van-popup class="search-pop" v-model="showSearchDialog" :overlay="false" transition="van-slide-right">
      <div class="head-search-dialog">
        <div class="head-wrap">
          <div class="head-search-item">
            <input
              class="searchInput"
              :class="is_search_button ? 'dz-searchInput': ''"
              ref="searchInput"
              type="text"
              confirm-type="search"
              v-model="keywords"
              :placeholder="is_search_button ? '请输入姓名/产品名关键词搜索': '请输入商品/店铺名称'"
              @confirm="searchGoodsEvent">
            <div class="icon miniprogram" @click="searchGoodsEvent">
              <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
              <!-- TODO 暂时隐藏svg -->
            </div>
          </div>
          <div class="head-search-cancel searchBtn" v-if="is_search_button" @click="searchGoodsEvent">搜索</div>
          <div class="head-search-cancel" v-if="!is_search_button" @click="showSearchDialog = false">取消</div>
        </div>
        <div class="middle-wrap">
          <div class="search-tips" v-if="searchList && searchList.length > 0">
            <div class="search-tips-title">
              <span>搜索历史</span>
              <span class="icon fr miniprogram"  @click="handleClickDelete">
                <img class="img_delete" src="https://img.wifenxiao.com/h5-wfx/images/common/delete-icon.png" />
                <!-- TODO 暂时隐藏svg -->
              </span>
            </div>
            <div class="search-tips-wrap">
              <div
                class="search-tips-wrap-item"
                @click="handleClickHistory(item)"
                v-for="(item,index) in searchList"
                :key="index">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>      
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
  /**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-10-26 18:48:09
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-30 13:37:06
	 */
  import { Dialog } from 'vant'
  import 'vant/lib/index.css'
  import StoreSave from '@/utils/store'
  
  export default Vue.extend({
    name: 'index',
    props: {
      value: {
        type: String
      },
      is_search_button: {
        type: Number,
        default: 0
      },
      deleteTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        showSearchDialog: false,
        keywords: '',
        searchList: []
      }
    },
    watch: {
      value() {
        this.keywords = this.value
      },
      deleteTitle(val) {
        if (val) {
          const list = this.searchList
          this.keywords = ''
          this.searchList = list.filter(item => item != val)
          StoreSave.saveLocal('searchHistory', this.searchList)
        }
      }
    },
    mounted() {
      this.getHistory()
      this.keywords = this.value
    },
    methods: {
      // 删除历史搜索按钮
      handleClickDelete() {
        Dialog.confirm({
          message: '确定删除全部搜索历史？',
          className: 'common-confirm',
          closeOnClickOverlay: true
        }).then(() => {
          // on confirm
          this.searchList = []
          this.keywords = ''
          StoreSave.saveLocal('searchHistory', this.searchList)
        }).catch(() => {
          // on cancel
        })
      },
      /**
       * 打开搜索弹层，输入框自动获取焦点
       */
      handleClickOpenDialog() {
        this.showSearchDialog = true
        setTimeout(() => {
          this.$refs.searchInput.focus()
        }, 300)
      },
      /**
       * 抛出refreshFn方法提供搜索
       */
      searchGoodsEvent() {
        this.showSearchDialog = false
        this.$emit('input', this.keywords)
        this.$emit('refreshFn')
        if (this.keywords && this.keywords != '') {
          const searchList = this.searchList
          // console.log(searchList, 111)
          searchList.push(this.keywords)
          this.searchList = searchList
        }
        const arr = [...new Set(this.searchList)]
        this.searchList = arr
        StoreSave.saveLocal('searchHistory', arr)
      },
      /**
       * 点击历史记录搜索
       */
      handleClickHistory(item) {
        this.keywords = item
        this.searchGoodsEvent()
      },
      /**
       * 历史搜索
       */
      getHistory() {
        const searchHistory = StoreSave.fetchLocal('searchHistory')
        this.searchList = Array.isArray(searchHistory) ? searchHistory : []
      }
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .head-search{
    padding: 20px;
    background: #fff;
    &-item{
      /* padding: 15px 40px ;
      border:3px solid #ff5000;
      border-radius: 40px;
      position: relative;
      input{
        background: #fafafa;
        height: 36px;
        line-height: 36px;
        font-size: 26px;
        width: percentage(550/635);
        border: none;
      }
      .icon{
        width: 72px;
        height: 72px;
        line-height: 72px;
        text-align: center;
        position: absolute;
        right: 5px;
        top: -4px;
        font-size: 34px;
      } */
      position: relative;
      width: 100%;
      height: 72px;
      border-radius: 36px;
      font-size: 0;
      background: #f7f7f7;
      .icon {
        position: absolute;
        line-height: 72px;
        left: 28px;
        top:0;
        color: #999999;
        font-size: 28px;
        margin-right: 10px;
        &.miniprogram {
          line-height: initial;
          top:22px;
        }
        .icon_search, .img_search{
          width:28px;
          height:28px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 24px;
        padding: 15px 70px;
        border: 0;
        background: transparent;
      }
    }
    /* &-dialog{
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      height: 100vh;
      background: #fff;
      z-index: 11; */
    .search-pop{
      top:0;
      left:0;
      width:100%;
      height:100vh;
      transform:none;
      .head-wrap{
        font-size: 0;
        padding: 20px;
        .head-search-item{
          display: inline-block;
          width: calc(100% - 90px);
          // @include alignTop;
        }
        .head-search-cancel{
          display: inline-block;
          width: 90px;
          line-height: 72px;
          height: 72px;
          font-size: 26px;
          text-align: center;
          color: #333;
          @include alignTop;
          &.searchBtn {
            z-index: 10;
            background-color: #ee7a48;
            border-radius: 20px;
            color: #fff;
            font-size: 28px
          }
        }
      }
      .middle-wrap{
        padding-top: 30px;
        border-radius: 40px;
        background: #fff;
        .search-tips{
          padding:0 25px 30px;
          &-title{
            margin-bottom: 30px;
            span{
              display: inline-block;
              font-size: 26px;
              color: #333;
            }
            .icon{
              font-size:30px;
              color: #999;
              padding: 10px;
              margin-top:-14px;
              &.miniprogram{
                margin-top: 0;
              }
              /* margin-top: -10px;
              margin-right: -10px; */
              .img_delete{
                width:30px;
                height:29px;
              }
            }
          }
          &-wrap{
            font-size: 0;
            &-item{
              padding: 12px 28px;
              display: inline-block;
              background: #F2F2F2;
              color: #666;
              border-radius: 60px;
              font-size: 24px;
              margin-right: 16px;
              margin-bottom: 16px;
            }
          }
        }
      }
      
    }
  }
.dz-searchInput {
  font-size: 28px!important;
}
.head-flex-dz {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .head-search-item {
    width: calc(100% - 100px);
  }
  .head-search-cancel{
    display: inline-block;
    width: 90px;
    line-height: 72px;
    height: 72px;
    text-align: center;
    @include alignTop;
    z-index: 10;
    background-color: #ee7a48;
    border-radius: 20px;
    color: #fff;
    font-size: 28px
  }
}

</style>
